<template>
	<view class="trend-info-tab">
		<view @tap="toUserInfo(trend.userId)" class="trend-head-info"><image :src="trend.userHeardUrl" mode="aspectFill" lazy-load></image></view>

		<view class="trend-info" :class="[isMe ? '' : 'info-bottom']">
			<view class="trend-user-info">
				<text>{{ trend.userNickName }}</text>
				<view class="trend-user-city">
					<view class="icon iconfont icon-dingwei"></view>
					{{ trend.address }}
				</view>
			</view>
			<view class="trend-user-age">
				<view :class="[trend.sex == 0 ? 'trend-sex-woman' : 'trend-sex-man']">
					<view :class="[trend.sex == 0 ? 'icon-nv' : 'icon-nan']" class="icon iconfont"></view>
					{{ trend.userAge }}
				</view>
				<view>{{ trend.publishDate }}</view>
			</view>
			<!-- 图文部分 -->
			<view class="trend-desc-info" :class="[trend.trendImgs.length === 1 ? 'uni-flex' : '']">
				<!-- 图片 -->
				<view class="trend-desc-imgs">
					<block v-for="(item, idx) in trend.trendImgs" :key="idx">
						<view @tap="previewImage(idx, trend.trendImgs)" :class="[trend.trendImgs.length === 1 ? 'once' : 'more']">
							<image :src="item" mode="heightFix" lazy-load></image>
						</view>
					</block>
				</view>

				<!-- 描述 -->
				<view class="trend-info-message" :class="[trend.trendImgs.length > 1 ? 'trend-message-between' : '']">
					<view class="trend-info-topic">#{{ trend.trendTopic ? trend.trendTopic : '心情' }}</view>
					<view class="">{{ trend.trendText }}</view>
				</view>
			</view>

			<view class="trend-handle">
				<view class="" @tap="thumbsUp(index)">
					<view :class="[trend.isLike ? 'trend-like' : '']" class="icon iconfont icon-dianzan"></view>
					{{ trend.likesNum }}
				</view>
				<view v-if="!isMe" class="iconfont icon-jinggao" @tap="tipoff(trend.userId)"></view>
				<view v-else class="opt-more" @tap="showMore(trend.userId)">...</view>
				<view v-if="show" class="opt-box">
					<view v-if="!trend.isCheck" class="" @tap="deleteTrend(index)">删除</view>
					<view @tap="show = false" class="">取消</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		trend: Object,
		toGo: {
			type: Boolean,
			default: true
		},
		isMe: {
			type: Boolean,
			default: false
		},
		index: {
			type: Number
		}
	},
	data() {
		return {
			show: false
		};
	},
	methods: {
		deleteTrend(index) {
			this.$emit('delete', index);
			this.show = false;
		},
		previewImage(index, imgData) {
			if (imgData instanceof String) {
				imgData = imgData.Array.of(imgData);
			}
			uni.previewImage({
				urls: imgData,
				current: index,
				longPressActions: {
					itemList: [],
					success() {}
				}
			});
		},
		tipoff(userId) {
			if (userId && !this.isMe) {
				uni.navigateTo({
					url: `../tipoff/tipoff?userId=${userId}`
				});
			}
		},
		showMore() {
			this.show = true;
		},
		toUserInfo(userId) {
			if (this.toGo) {
				uni.navigateTo({
					url: `../user-info/user-info?userId=${userId}`
				});
			}
		},
		thumbsUp(index) {
			if (!this.isMe) {
				this.$emit('thumbsUp', index);
			}
		}
	}
};
</script>

<style lang="less" scoped>
// 每个图文列表
.trend-info-tab {
	margin-top: 10rpx;
	padding: 10rpx 20rpx 0;
	display: flex;
	flex-direction: row;
	background-color: #ffffff;

	// 头像
	.trend-head-info {
		display: flex;
		width: 100rpx;
		height: 100rpx;
		margin-top: 10rpx;
		image {
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
		}
	}

	.info-bottom {
		border-bottom: 1rpx solid #eeeeee;
	}
	// 内容部分
	.trend-info {
		flex: 1;
		margin-left: 10rpx;
		padding-bottom: 20rpx;
		// 昵称城市
		.trend-user-info {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			font-size: 32rpx;
			.trend-user-city {
				display: flex;
				flex-direction: row;
				align-items: center;
				color: #747474;
				view {
					margin-right: 10rpx;
					font-size: 22rpx;
				}
			}
		}
		// 年龄时间性别
		.trend-user-age {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			// 年龄
			& > view:first-child {
				display: flex;
				flex-direction: row;
				align-items: center;

				border-radius: 15rpx;
				padding: 0 10rpx;
				color: #ffffff;
				font-size: 22rpx;
				line-height: 18rpx;
				view {
					font-size: 18rpx;
					margin-right: 5rpx;
				}
			}
			//
			& > view:last-child {
				font-size: 24rpx;
				color: #bebebe;
			}
		}
		// 图文
		.trend-desc-info {
			margin: 25rpx 0;
			width: 100%;

			// 图片
			.trend-desc-imgs {
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;

				// 单个
				.once {
					vertical-align: middle;
					height: 300rpx;
					width: 65%;
					margin-left: 20rpx;
					margin-right: 10rpx;
					border-radius: 20rpx;

					image {
						border-radius: 20rpx;
						height: 100%;
						width: 100%;
						overflow: hidden;
					}
				}
				// 多张
				.more {
					vertical-align: middle;
					height: 237rpx;
					width: 170rpx;
					margin: 10rpx 0 10rpx 20rpx;
					overflow: hidden;
					border-radius: 20rpx;
					image {
						border-radius: 20rpx;
						height: 100%;
						width: 100%;
					}
				}
			}

			// 文字
			.trend-info-message {
				margin-top: 10rpx;

				.trend-info-topic {
					color: #73a1ba;
				}
			}
		}
		.trend-handle {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			position: relative;
			& > view:first-child {
				display: flex;
				flex-direction: row;
				align-items: center;
				color: #909092;
				font-size: 26rpx;
				view {
					font-size: 26rpx;
					margin-right: 10rpx;
				}
			}
			.opt-more {
				color: #909092;
				margin-right: 20rpx;
				font-size: 35rpx;
			}
			.icon-jinggao {
				margin-right: 20rpx;
				font-size: 26rpx;
				color: #555555;
			}
			.opt-box {
				position: absolute;
				bottom: -120rpx;
				right: 10rpx;
				background: #ffffff;
				box-shadow: 0 8rpx 16rpx 0 rgba(0, 0, 0, 0.18);
				border-radius: 6rpx;
				view {
					padding: 5rpx 25rpx;
				}
			}
		}
	}
}

.trend-message-between {
	display: flex;
	flex-direction: row;
	margin-right: 20rpx;

	.trend-info-topic {
		margin-right: 20rpx;
	}
}

.trend-sex-woman {
	background: linear-gradient(to right, #ffb4bb, #fc81ab);
}
.trend-sex-man {
	background: linear-gradient(to right, #1184ff, #2c6fff);
}
.trend-like {
	color: #fc81ab;
}
</style>
